<script>
import VisualizationOne from "@/views/VisualizationSet/components/VisualizationOne.vue";
import VisualizationTwo from "@/views/VisualizationSet/components/VisualizationTwo.vue"
import VisualizationThree from "@/views/VisualizationSet/components/VisualizationThree.vue"
import VisualizationFour from "@/views/VisualizationSet/components/VisualizationFour.vue"
import VisualizationFive from "@/views/VisualizationSet/components/VisualizationFive.vue"
import VisualizationSix from "@/views/VisualizationSet/components/VisualizationSix.vue"
import VisualizationSeven from "@/views/VisualizationSet/components/VisualizationSeven.vue"
import VisualizationEight from "@/views/VisualizationSet/components/VisualizationEight.vue"
import VisualizationNine from "@/views/VisualizationSet/components/VisualizationNine.vue"
import VisualizationTen from "@/views/VisualizationSet/components/VisualizationTen.vue"
import VisualizationEleven from "@/views/VisualizationSet/components/VisualizationEleven.vue"
import VisualizationTwelve from "@/views/VisualizationSet/components/VisualizationTwelve.vue"

  export default {
    name: 'VisualizationSet',
    components: {
      "VisualizationOne": VisualizationOne,
      "VisualizationTwo": VisualizationTwo,
      "VisualizationThree": VisualizationThree,
      "VisualizationFour": VisualizationFour,
      "VisualizationFive": VisualizationFive,
      "VisualizationSix": VisualizationSix,
      "VisualizationSeven": VisualizationSeven,
      "VisualizationEight": VisualizationEight,
      "VisualizationNine": VisualizationNine,
      "VisualizationTen": VisualizationTen,
      "VisualizationEleven": VisualizationEleven,
      "VisualizationTwelve": VisualizationTwelve,
    }
  }
</script>

<template>
<div id="vis-box">
  <div class="box-top">
    <div class="box-div1">
      <VisualizationOne></VisualizationOne>
    </div>
    <div class="box-div2">
      <VisualizationTwo></VisualizationTwo>
    </div>
  </div>
  <div class="box-center-one">
    <div class="box-div1">
      <VisualizationThree></VisualizationThree>
    </div>
    <div class="box-div2">
      <VisualizationFour></VisualizationFour>
    </div>
  </div>
  <div class="box-center-two">
    <div class="box-div1" style="overflow: scroll;">
      <VisualizationFive></VisualizationFive>
    </div>
    <div class="box-div2" style="overflow: scroll;">
      <VisualizationSix></VisualizationSix>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationSeven></VisualizationSeven>
    </div>
    <div class="box-div2">
      <VisualizationEight></VisualizationEight>
    </div>
  </div>
  <div class="box-bottom1">
    <div class="box-div1">
      <VisualizationNine></VisualizationNine>
    </div>
    <div class="box-div2">
      <VisualizationTen></VisualizationTen>
    </div>
  </div>
  <div class="box-bottom2">
    <div class="box-div1">
      <VisualizationEleven></VisualizationEleven>
    </div>
    <div class="box-div2">
      <VisualizationTwelve></VisualizationTwelve>
    </div>
  </div>
</div>
</template>

<style scoped>
@import "css/VisualizationSet.css";
</style>